<template>
  <page class="about">
    <page-header>
      <x-header :left-options="{backText: ''}">关于我们</x-header>
    </page-header>
    <page-content :scroll="false">
      <div class="img">
        <img src="../../assets/logo.jpg" class="imag" />
        <div class="edition">
          <p>{{version}}</p>
        </div>
      </div>
      <div class="edit">
        <div class="edit-c">
          版本更新
          <span style="float: right;">
            <i class="material-icons right">chevron_right</i>
          </span>
        </div>
      </div>
    </page-content>
  </page>
</template>

<script>
import version from '@utils/version'
import { XHeader } from 'vux'
export default {
  name: 'About',
  components: {
    XHeader
  },
  data () {
    return {
      version: '1.0.0'
    }
  },
  mounted () {
    this.version = version.getVersion() + ''
  }
}
</script>

<style lang="scss" scoped>
.about {
  height: 100%;
  width: 100%;

  .right {
    color: #c7c7cc;
    font-size: 1.5rem;
    line-height: 2.5rem !important;
  }
  .img {
    width: 100%;
    height: 7rem;
    position: relative;
  }
  .imag {
    position: absolute;
    top: 1rem;
    left: 50%;
    margin-left: -2rem;
    width: 60px;
    height: 60px;
  }
  .edition {
    position: absolute;
    top: 5.2rem;
    left: 50%;
    margin-left: -1.8rem;
    color: #1f82d2;
  }
  .edit {
    width: 100%;
    height: 2.5rem;
    background: #fff;
    line-height: 2.5rem;
  }
  .edit-c {
    padding: 0 0.6rem;
  }
  .head {
    width: 100%;
    background: #1e82d2;
    font-size: 1.125rem;
    height: 3rem;
  }
}
</style>
